<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>orienter</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=640, target-densitydpi=device-dpi, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <script type="text/javascript" src="../js/orienter.min.js"></script>

    <style>
        ul, li {
            list-style: none;
            line-height: 0px;
        }

        body, div, ul, li, img, p, a, h1, h2, h3 {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }

        html, body {
            background: #000;
            color: #fff;
            font-family: "微软雅黑", "黑体", "宋体", Helvetica, Verdana, sans-serif;
            font-size: 10px;
        }

        #tip {
            font-size: 60px;
        }
    </style>

</head>

<body>
<p id="tip"></p>

<script>
    var o = new Orienter();
    var tip = document.getElementById('tip');
    o.onOrient = function (obj) {
        tip.innerHTML =
                'alpha:' + obj.a +
                '<br>' + 'beta:' + obj.b +
                '<br>' + 'gamma:' + obj.g +
                '<br>' + 'longitude:' + obj.lon +
                '<br>' + 'latitude:' + obj.lat +
                '<br>' + 'direction:' + obj.dir;
    };
    o.init();

</script>

</body>
</html>
